<template>
  <div>
    <el-dialog title="添加规格参数" :visible.sync="dialogVisible" width="50%">
      <!-- 显示规格内容的区域 -->
      <TreeGoods @sendTreeData="sendTreeData"></TreeGoods>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <!-- disabled属性来定义按钮是否可用，它接受一个Boolean值 -->
        <el-button
          type="primary"
          @click="innerVisible = true"
          :disabled="isdisabled"
          >确定并添加到分组</el-button
        >
      </span>
      <!-- 二级弹框--嵌套 -->
      <el-dialog
        width="50%"
        title="商品规格参数配置"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="title">当前选中的商品：{{ treeData.name }}</div>

        <el-button type="primary" @click="addDomain">新增规格列表</el-button>
        <hr />

        <!-- ------------------------------------------------------------------------- -->
        <el-form
          :model="dynamicValidateForm"
          ref="dynamicValidateForm"
          label-width="120px"
          class="demo-dynamic"
        >
          <!-- groups[{title},{value},{children:[{}]},.........] -->
          <el-form-item
            v-for="(item, index) in dynamicValidateForm.groups"
            :label="item.title + index"
            :key="index"
            :prop="item.title"
            :rules="{
              required: true,
              message: '域名不能为空',
              trigger: 'blur',
            }"
          >
            <div class="item">
              <el-input v-model="item.title"></el-input>

              <el-button @click.prevent="addchildDomain(index)"
                >增加子组件</el-button
              >
              <el-button @click.prevent="removeDomain(index)">删除</el-button>
            </div>
            <!-- 内层的表单 -->

            <el-form-item
              v-for="(ele, i) in item.children"
              :label="ele.title + i"
              :key="i"
              :prop="ele.title"
              :rules="{
                required: true,
                message: '域名不能为空',
                trigger: 'blur',
              }"
            >
              <div class="item">
                <el-input v-model="ele.title"></el-input>
                <el-button @click.prevent="removechildDomain(index, i)"
                  >删除</el-button
                >
              </div>
            </el-form-item>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('dynamicValidateForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('dynamicValidateForm')"
              >重置</el-button  >
          
          </el-form-item> -->
        </el-form>

        <span slot="footer" class="dialog-footer">
          <!-- 内弹窗的按钮 -->
          <el-button type="primary" @click="submitForm('dynamicValidateForm')"
            >确定</el-button
          >
          <!-- disabled属性来定义按钮是否可用，它接受一个Boolean值 -->
          <el-button type="primary" @click="resetForm('dynamicValidateForm')"
            >取消</el-button
          >
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeGoods from "@/views/Goods/TreeGoods.vue";
export default {
  components: { TreeGoods },
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,
      isdisabled: true, //默认不可以点击
      treeData: {}, //tree数据
      dynamicValidateForm: {
        //动态表单意思
        groups: [],
      },
    };
  },
  methods: {
    //增加子组
    addchildDomain(index) {
      this.dynamicValidateForm.groups[index].children.push({
        value: "",
        title: "",
      });
    },
    //获取点击tree的数据
    sendTreeData(val) {
      console.log("获取到tree的数据", val);
      this.treeData = val;
      this.isdisabled = false;
    },
    //提交事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("提交规格参数", this.dynamicValidateForm.groups);
          //  参数：itemCatId,content,specsName
          this.$api
            .getinsertItemParam({
              itemCatId: this.treeData.cid,
              specsName: this.treeData.name,
              content: JSON.stringify(this.dynamicValidateForm.groups),
            })
            .then((res) => {
              console.log("--后端参数添加接口", res.data);
              if (res.data.status == 200) {
                //添加成功 隐藏弹框  更新规格列表
                this.innerVisible = false;
                this.dialogVisible = false;
                //清空数据
                this.isdisabled = true;
                this.dynamicValidateForm.groups = [];

                this.$parent.http(1);
              } else {
                console.log("消息提示--失败了 缺点：数据库没有去重");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消事件
    resetForm(formName) {
      // 清空表单
      this.$refs[formName].resetFields();
      this.innerVisible = false;
      // 清空动态表单的 groups 数组
      this.dynamicValidateForm.groups = [];
    },
    //删除当前的组
    removeDomain(index) {
      this.dynamicValidateForm.groups.splice(index, 1);
    },
    //删除子组件
    removechildDomain(index, i) {
      this.dynamicValidateForm.groups[index].children.splice(i, 1);
    },
    //新增列表---增加大组说明规格配置
    addDomain() {
      this.dynamicValidateForm.groups.push({
        value: "",
        title: "",
        children: [],
      });
    },
    handleClose() {},
  },
};
</script>

<style lang="less" scoped>
.item {
  margin-bottom: 10px; //用于设置元素的下外边距为 10 像素。
  display: flex;
  button {
    margin-left: 10px;
  }
}
</style>